<template>
  <div class="appearance-settings space-y-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-foreground mb-2 flex items-center">
        <i class="i-mdi-monitor mr-3 w-6 h-6" />
        {{ t('settings.menu.appearance') }}
      </h1>
      <p class="text-muted-foreground">{{ t('settings.appearance.description') }}</p>
    </div>

    <!-- 主题设置 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-palette mr-2 w-5 h-5" />
        {{ t('settings.appearance.theme') }}
      </h2>

      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <div>
            <label class="text-sm font-medium text-foreground">{{ t('settings.appearance.themeMode') }}</label>
            <p class="text-xs text-muted-foreground">{{ t('settings.appearance.themeModeDescription') }}</p>
          </div>
          <ThemeToggle mode="group" />
        </div>

        <div class="flex items-center justify-between">
          <div>
            <label class="text-sm font-medium text-foreground">{{ t('settings.appearance.followSystem') }}</label>
            <p class="text-xs text-muted-foreground">{{ t('settings.appearance.followSystemDescription') }}</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input v-model="settings.followSystemTheme" type="checkbox" class="sr-only peer" />
            <div
              class="w-11 h-6 bg-muted peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
          </label>
        </div>

        <!-- 主题色彩 -->
        <div>
          <label class="block text-sm font-medium text-foreground">{{ t('settings.appearance.themeColor') }}</label>
          <p class="text-xs text-muted-foreground text-left mb-4">
            {{ t('settings.appearance.themeColorDescription') }}
          </p>
          <ThemeColorPicker :current-theme-color="themeStore.currentThemeColor" @change="themeStore.setThemeColor" />
        </div>

        <!-- 主题预览 -->
        <div class="mt-6">
          <ThemePreview />
        </div>
      </div>
    </div>

    <!-- 字体设置 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-format-font mr-2 w-5 h-5" />
        {{ t('settings.appearance.font') }}
      </h2>

      <div class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-foreground mb-2">{{
              t('settings.appearance.fontFamily')
            }}</label>
            <select
              v-model="settings.fontFamily"
              class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              <option value="system">{{ t('settings.appearance.fontOptions.system') }}</option>
              <option value="sans-serif">{{ t('settings.appearance.fontOptions.sansSerif') }}</option>
              <option value="serif">{{ t('settings.appearance.fontOptions.serif') }}</option>
              <option value="monospace">{{ t('settings.appearance.fontOptions.monospace') }}</option>
              <option value="custom">{{ t('settings.appearance.fontOptions.custom') }}</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-foreground mb-2">
              {{ t('settings.appearance.fontSize') }}: {{ settings.fontSize }}px
            </label>
            <input
              v-model.number="settings.fontSize"
              type="range"
              min="12"
              max="24"
              step="1"
              class="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider" />
            <div class="flex justify-between text-xs text-muted-foreground mt-1">
              <span>12px</span>
              <span>24px</span>
            </div>
          </div>
        </div>

        <div v-if="settings.fontFamily === 'custom'">
          <label class="block text-sm font-medium text-foreground mb-2">{{
            t('settings.appearance.customFontName')
          }}</label>
          <input
            v-model="settings.customFontName"
            type="text"
            class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
            :placeholder="t('settings.appearance.customFontPlaceholder')" />
        </div>

        <!-- 字体预览 -->
        <div class="p-4 border border-border rounded-lg bg-muted/20">
          <p class="text-sm text-muted-foreground mb-2">{{ t('settings.appearance.fontPreview') }}:</p>
          <p
            :style="{
              fontFamily: getFontFamily,
              fontSize: settings.fontSize + 'px'
            }"
            class="text-foreground">
            {{ t('settings.appearance.fontPreviewText') }}
          </p>
        </div>
      </div>
    </div>

    <!-- 界面缩放 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-magnify mr-2 w-5 h-5" />
        {{ t('settings.appearance.zoom') }}
      </h2>

      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-foreground mb-2">
            {{ t('settings.appearance.zoomLevel') }}: {{ settings.zoomLevel }}%
          </label>
          <input
            v-model.number="settings.zoomLevel"
            type="range"
            min="75"
            max="200"
            step="25"
            class="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider" />
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>75%</span>
            <span>100%</span>
            <span>125%</span>
            <span>150%</span>
            <span>200%</span>
          </div>
        </div>

        <div class="flex gap-2">
          <button
            v-for="preset in zoomPresets"
            :key="preset"
            :class="[
              'px-3 py-1 text-sm rounded transition-colors',
              settings.zoomLevel === preset
                ? 'bg-primary text-primary-foreground'
                : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
            ]"
            @click="settings.zoomLevel = preset">
            {{ preset }}%
          </button>
        </div>
      </div>
    </div>

    <!-- 动画效果 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-animation mr-2 w-5 h-5" />
        {{ t('settings.appearance.animation') }}
      </h2>

      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <div>
            <label class="text-sm font-medium text-foreground">{{ t('settings.appearance.enableAnimations') }}</label>
            <p class="text-xs text-muted-foreground">{{ t('settings.appearance.enableAnimationsDescription') }}</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input v-model="settings.enableAnimations" type="checkbox" class="sr-only peer" />
            <div
              class="w-11 h-6 bg-muted peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
          </label>
        </div>

        <div class="flex items-center justify-between">
          <div>
            <label class="text-sm font-medium text-foreground">{{ t('settings.appearance.reduceMotion') }}</label>
            <p class="text-xs text-muted-foreground">{{ t('settings.appearance.reduceMotionDescription') }}</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input v-model="settings.reduceMotion" type="checkbox" class="sr-only peer" />
            <div
              class="w-11 h-6 bg-muted peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
          </label>
        </div>

        <div v-if="settings.enableAnimations && !settings.reduceMotion">
          <label class="block text-sm font-medium text-foreground mb-2">
            {{ t('settings.appearance.animationSpeed') }}: {{ settings.animationSpeed }}x
          </label>
          <input
            v-model.number="settings.animationSpeed"
            type="range"
            min="0.5"
            max="2"
            step="0.1"
            class="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider" />
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>{{ t('settings.appearance.slow') }}</span>
            <span>{{ t('settings.appearance.normal') }}</span>
            <span>{{ t('settings.appearance.fast') }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="flex gap-3 pt-4">
      <button
        class="px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
        @click="saveSettings">
        {{ t('common.save') }}
      </button>
      <button
        class="px-6 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
        @click="resetSettings">
        {{ t('common.reset') }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

import ThemeColorPicker from '@/components/ThemeColorPicker.vue';
import ThemePreview from '@/components/ThemePreview.vue';
import ThemeToggle from '@/components/ThemeToggle.vue';
import { t } from '@/i18n';
import { useThemeStore } from '@/stores/theme';

// 使用主题store
const themeStore = useThemeStore();

// 缩放预设
const zoomPresets = [75, 100, 125, 150, 200];

// 设置数据
const settings = ref({
  followSystemTheme: false,
  fontFamily: 'system',
  customFontName: '',
  fontSize: 16,
  zoomLevel: 100,
  enableAnimations: true,
  reduceMotion: false,
  animationSpeed: 1.0
});

// 获取字体族
const getFontFamily = computed(() => {
  switch (settings.value.fontFamily) {
    case 'system':
      return '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
    case 'sans-serif':
      return 'Arial, Helvetica, sans-serif';
    case 'serif':
      return 'Georgia, "Times New Roman", serif';
    case 'monospace':
      return '"Courier New", Consolas, monospace';
    case 'custom':
      return settings.value.customFontName || 'inherit';
    default:
      return 'inherit';
  }
});

// 保存设置
const saveSettings = () => {
  console.log('保存显示设置:', settings.value);
  console.log('当前主题色彩:', themeStore.currentThemeColor);
  alert(t('common.success'));
};

// 重置设置
const resetSettings = () => {
  if (confirm(t('settings.appearance.resetConfirm'))) {
    settings.value = {
      followSystemTheme: false,
      fontFamily: 'system',
      customFontName: '',
      fontSize: 16,
      zoomLevel: 100,
      enableAnimations: true,
      reduceMotion: false,
      animationSpeed: 1.0
    };
    // 重置主题色彩为默认蓝色
    themeStore.setThemeColor('blue');
  }
};
</script>

<style lang="scss" scoped></style>
